<template>
	<router-view v-slot="{ Component }">
		<transition name="rootpage">
			<component :is="Component" />
		</transition>
	</router-view>
</template>

<script>
	export default {
		name: 'App',
	}
</script>

<style>
	.rootpage-enter-active,
	.rootpage-leave-active {
		top: 0;
		position: absolute;
		transition: all .5s;
	}

	.rootpage-enter-from {
		position: absolute;
		top: 0;
		opacity: 0;
		transform: translateX(100%);
	}

	.rootpage-leave-to {
		position: absolute;
		top: 0;
		opacity: 0;
		z-index: -99;
		transform: translateX(-100%);
	}
</style>
